<template>
  <div>
    <div class="el-one">
      <div class="card-one">
        <el-card>
          <div class="title">冷站</div>
          <div class="nh_css">
            <div>
              能耗：
              <el-select v-model="value" style="width: 120px" size="small">
                <el-option label="RMB" value="RMB" />
                <el-option label="kWh" value="kWh" />
                <el-option label="kgCO²" value="kgCO²" />
                <el-option label="kgce" value="kgce" />
              </el-select>
            </div>

            <div class="ms">
              <p>
                当年（去年）<span class="pFont"> <!-- 2,560,080 --> </span
                ><span class="ps"
                  >(
                  <!-- 2,235,080 -->
                  )</span
                >
              </p>
              <p style="margin-right: 50px">
                当月（去年同月）<span class="pFont">
                  <!-- 123,080 -->
                </span>
                <span class="ps"
                  >(
                  <!-- 1,080 -->
                  )</span
                >
              </p>
              <p>
                当日（昨日）<span class="pFont">{{
                  zhComputed(lzmsg.data.p0)
                }}</span
                ><span class="ps">({{ zhComputed(lzmsg.data.p1) }})</span>
              </p>
            </div>
            <!-- zhComputed为vue3计算属性，用来做单位转换 -->

            <div class="ms">
              <p>
                冷站效率（累计）：<span class="pFont">{{ lzmsg.data.ps }}</span
                ><span class="ps">KW/kw</span
                ><span class="pFont" style="margin-left: 40px">
                  <!-- 0.61 -->
                </span>
              </p>
              <p>
                冷站效率（实时）：<span class="pFont"> <!-- 5.6 --> </span
                ><span class="ps">KW/kw</span
                ><span class="pFont" style="margin-left: 40px">
                  <!-- 0.63 -->
                </span>
              </p>
            </div>
          </div>
          <div class="ech-one">
            <div style="height: 345px">
              <scEcharts :option="option1"></scEcharts>
            </div>
            <div class="rq">
              <el-date-picker
                :disabled-date="disabledDate"
                v-model="time"
                value-format="YYYY-MM-DD"
                @change="timee"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                size="small"
                style="width: 210px"
              />
            </div>
          </div>

          <div class="ech-two">
            <div style="height: 300px; width: 730px">
              <scEcharts :option="option2"></scEcharts>
            </div>
            <div class="rq">
              <el-select
                v-model="select"
                @change="getproportion(select)"
                style="width: 80px"
                size="small"
              >
                <el-option label="kWh" value="kWh" />
                <el-option label="kWh/%" value="kWh/%" />
              </el-select>
            </div>
          </div>
        </el-card>
      </div>
      <div class="card-two">
        <el-card>
          <div class="title">实时运行参数</div>
          <div class="head">
            <p>
              冷机运行台数：<span class="pFont">{{ refrigeratorNum }}</span
              ><span class="ps">台</span>
            </p>
            <p>
              总功率：<span class="pFont">{{ zonggonglv }}</span><span class="ps">kw</span>
            </p>
            <p>
              冷量：<span class="pFont">{{ lengliang }}</span><span class="ps">kw</span>
            </p>
          </div>
        </el-card>
        <el-card style="margin-top: 8px">
          <div class="centt">
            <div class="titles">热平衡</div>
            <div>
              <el-date-picker
                :disabled-date="disabledDate"
                v-model="time1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 200px; margin: 0 20px"
                size="small"
                value-format="YYYY-MM-DD"
                @change="timee4"
              />
            </div>
          </div>
          <div class="qwe">
            <div style="height: 250px">
              <scEcharts :option="option3"></scEcharts>
            </div>

            <div class="reph">
              <div>热平衡率</div>
              <div><span class="pFont"></span><span class="ps">（）</span></div>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 8px; height: 387px">
          <div class="shebei">
            <div>设备运行时间（小时）</div>
            <div>
              <el-date-picker
                :disabled-date="disabledDate"
                v-model="time2"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 200px; margin: 0 20px"
                size="small"
              />
            </div>
          </div>
          <div class="tabl" style="width: 800px">
            <el-table
              :data="tableData"
              :row-style="{ height: '56px' }"
              style="width: 100%"
              :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
            >
              <el-table-column label="冷机">
                <el-table-column prop="1#" label="1#" />
                <el-table-column prop="2#" label="2#" />
                <el-table-column prop="3#" label="3#" />
                <el-table-column prop="4#" label="4#" />
              </el-table-column>
              <el-table-column label="冷冻泵">
                <el-table-column prop="name" label="1#" />
                <el-table-column prop="state" label="2#" />
                <el-table-column prop="city" label="3#" />
                <el-table-column prop="address" label="4#" />
                <el-table-column prop="address" label="5#" />
                <el-table-column prop="address" label="6#" />
              </el-table-column>
            </el-table>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-style="{ height: '56px' }"
              :header-cell-style="{ textAlign: 'center' }"
            >
              <el-table-column label="冷却泵">
                <el-table-column prop="name" label="1#" />
                <el-table-column prop="state" label="2#" />
                <el-table-column prop="city" label="3#" />
                <el-table-column prop="address" label="4#" />
                <el-table-column prop="address" label="5#" />
                <el-table-column prop="address" label="6#" />
              </el-table-column>
              <el-table-column label="冷却塔">
                <el-table-column prop="name" label="1#" />
                <el-table-column prop="state" label="2#" />
                <el-table-column prop="city" label="3#" />
                <el-table-column prop="address" label="5#" />
                <el-table-column prop="address" label="6#" />
                <el-table-column prop="address" label="7#" />
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
    <div class="el-two">
      <div class="card-one">
        <el-card>
          <div class="title">用能成本分析（冷量）</div>
          <div class="head">
            <div>
              累计用能成本<span class="pFont"></span
              ><span class="ps">RMB/kWh</span>
            </div>
            <div>
              当月用能成本<span class="pFont"></span
              ><span class="ps">RMB/kWh</span>
            </div>
            <div>
              当日用能成本<span class="pFont"></span
              ><span class="ps">RMB/kWh</span>
            </div>
          </div>
          <div class="head_ss">
            <el-select v-model="select1" style="width: 80px" size="small">
              <el-option label="小时" value="小时" />
            </el-select>
            <el-date-picker
              :disabled-date="disabledDate"
              v-model="time3"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style="width: 200px; margin: 0 20px"
              size="small"
              value-format="YYYY-MM-DD"
              @change="timee3"
            />
          </div>
          <div style="height: 300px; width: 730px">
            <scEcharts :option="option4"></scEcharts>
          </div>
        </el-card>
      </div>
      <div class="card-two">
        <el-card>
          <div class="title">峰平谷分析</div>
          <div class="hea-one">
            <ul>
              去年累计电量
              <li>总 <span class="mm"></span><span class="nn">kWh</span></li>
              <li>
                峰 <span class="mm"></span
                ><span class="nn">
                  <!-- 26.03% -->
                </span>
              </li>
              <li>
                平 <span class="mm"></span
                ><span class="nn">
                  <!-- 26.03% -->
                </span>
              </li>
              <li>
                台 <span class="mm"></span
                ><span class="nn">
                  <!-- 26.03% -->
                </span>
              </li>
            </ul>

            <ul>
              该段时间内
              <li>总 <span class="mm"></span><span class="nn">kWh</span></li>
              <li>
                峰 <span class="mm"></span
                ><span class="nn">
                  <!-- 26.03% -->
                </span>
              </li>
              <li>
                平 <span class="mm"></span
                ><span class="nn">
                  <!-- 26.03% -->
                </span>
              </li>
              <li>
                台 <span class="mm"></span
                ><span class="nn">
                  <!-- 26.03% -->
                </span>
              </li>
            </ul>
            <div class="con-two">
              <el-select v-model="select3" style="width: 80px" size="small">
                <el-option label="小时" value="小时" />
              </el-select>
              <el-date-picker
                :disabled-date="disabledDate"
                v-model="time5"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 200px; margin: 0 20px"
                size="small"
              />
            </div>
          </div>
          <div class="con">
            <div class="con-one">峰平谷用能分析</div>
            <div class="con-two">
              <el-select v-model="select2" style="width: 80px" size="small">
                <el-option label="小时" value="小时" />
              </el-select>
              <el-date-picker
                :disabled-date="disabledDate"
                v-model="time4"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 200px; margin: 0 20px"
                size="small"
                value-format="YYYY-MM-DD"
                @change="timee1"
              />
            </div>
          </div>
          <div style="height: 202px">
            <scEcharts :option="option5"></scEcharts>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import scEcharts from "@/components/scEcharts";
import { onMounted, reactive, ref, computed } from "vue";
import {
  ProjectGroupone,
  Analysis,
  getlzmsg,
  getLengZhanNum,
  getLengZhanTable,
  getLengZongleng,
} from "@/api/model/echarts";
import { AdminInputs } from "@/api/model/admins";
import dayjs from "dayjs";
// import dayjs from 'dayjs';
// import { type } from "os";
// import { number } from "echarts";
const value = ref("kWh");
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
const refrigeratorNum = ref(0);
const zonggonglv = ref(0);
const lengliang = ref(0);

const getLengZhanNumMsg = async () => {
  const { data } = await getLengZhanNum();
  console.log("冷战实时运行参数",data);
  refrigeratorNum.value = data.active_refrigerator;
};

const getLengZonglengMsg = async () => {
  const { data } = await getLengZongleng();
  console.log("总功率，冷量参数",data);
  zonggonglv.value = data.ps;
  lengliang.value = data.refr;
};
const getLengZhanTableMsg = async () => {
  const { data } = await getLengZhanTable();
  tableData.value = [data];
  console.log(tableData.value, 371);
};
const time = ref("");
const time1 = ref("");
const time2 = ref("");
const time3 = ref("");
const time4 = ref("");
const time5 = ref("");
const select = ref("kWh");
const select1 = ref("小时");
const select2 = ref("月");
const select3 = ref("全部");

// 单位转换
const dwzh = reactive({
  // kgce
  kgce: 0,
  // RMB
  rmb: 0.79,
  // kgco2
  kgco: 0,
});

// 用电数据单位转换计算属性
const zhComputed = computed(() => (dvalue) => {
  return value.value === "RMB"
    ? (dvalue * dwzh.rmb).toFixed(2)
    : value.value === "kgce"
    ? (dvalue * dwzh.kgce).toFixed(2)
    : value.value === "kgCO²"
    ? (dvalue * dwzh.kgco).toFixed(2)
    : dvalue;
});

const lzmsg = reactive({ data: {} });
const option1 = reactive({
  title: {
    text: "冷站效率分项",
    textStyle: {
      color: "#aaacab",
    },
    top: 30,
  },
  legend: {
    data: ["制冷机", "冷却水泵", "冷冻水泵", "冷却塔风机"],
    left: 270,
    top: 30,
    itemWidth: 15,
    itemHeight: 1,
  },
  grid: {
    left: "1%",
    right: "1%",
    bottom: "10%",
    top: "35%",
    containLabel: true,
  },
  xAxis: {
    name: "日",
    data: [],
  },
  yAxis: {
    name: "            kw/kw",
    type: "value",
    axisLine: {
      // x轴线隐藏，但不隐藏背景线
      show: true,
    },
  },
  tooltip: {
    trigger: "axis",
  },
  series: [
    {
      name: "制冷机",
      type: "line",
      stack: "Total",
      data: [],
      color: "#d90909",
    },
    {
      name: "冷却水泵",
      type: "line",
      stack: "Total",
      data: [],
      color: "#FFC40F",
    },
    {
      name: "冷冻水泵",
      type: "line",
      stack: "Total",
      data: [],
      color: "#CCCCCC",
    },
    {
      name: "冷却塔风机",
      type: "line",
      stack: "Total",
      data: [],
      color: "#0384DD",
    },
  ],
});
const option2 = reactive({
  title: {
    text: "设备用能占比",
    textStyle: {
      color: "#aaacab",
    },
    left: 23,
    top: 20,
  },
  legend: {
    orient: "vertical",
    right: 30,
    bottom: 25,
    itemWidth: 15,
  },
  tooltip: {
    trigger: "axis",
    // formatter:'{a}\n{c}%'
  },
  grid: {
    left: "3%",
    right: "15%",
    bottom: "3%",
    top: "30%",
    containLabel: true,
  },
  dataset: {
    source: [],
  },
  xAxis: { type: "category" },
  yAxis: {
    name: select.value,
    axisLine: {
      // x轴线隐藏，但不隐藏背景线
      show: true,
    },
  },
  series: [
    {
      type: "bar",
      barGap: 0,
      color: "#90cd50",
    },
    // { type: 'bar', barGap: 0, color: '#ffc000' },
    // { type: 'bar', barGap: 0, color: '#d6ebfa' },
    // { type: 'bar', barGap: 0, color: '#0070c0' },
  ],
});
const option3 = reactive({
  title: {
    text: "热平衡率趋势线",
    textStyle: {
      color: "#8f9898",
    },
    top: 2,
    left: 115,
  },
  xAxis: {
    name: "日",
    data: [],
  },
  yAxis: {
    name: "%",
    type: "value",
    axisLine: {
      // x轴线隐藏，但不隐藏背景线
      show: true,
    },
  },
  grid: {
    left: "15%",
    right: "7%",
    bottom: "10%",
    top: "25%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
  },
  series: [
    {
      data: [],
      type: "line",
      smooth: true,
      areaStyle: {
        color: "#fdf2ce",
        opacity: 0.5,
      },
      color: "#ffc40f",
    },
  ],
});
const option4 = reactive({
  title: {
    text: "用能成本分析",
    textStyle: {
      color: "#8f9898",
    },
    left: 20,
    top: 13,
  },
  xAxis: {
    name: "日",
    data: [],
  },
  yAxis: {
    name: "%",
    type: "value",
    axisLine: {
      // x轴线隐藏，但不隐藏背景线
      show: true,
    },
  },
  grid: {
    left: "3%",
    right: "7%",
    bottom: "10%",
    top: "25%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
  },
  series: [
    {
      data: [2, 6, 10, 11, 6, 3, 11, 2, 8, 3],
      type: "line",
      smooth: true,
      areaStyle: {
        color: "#fdf2ce",
        opacity: 0.5,
      },
      color: "#ffc40f",
    },
  ],
});
const option5 = reactive({
  tooltip: {
    trigger: "axis",
  },
  legend: {
    orient: "vertical",
    right: 30,
    bottom: 25,
    itemWidth: 15,
  },
  grid: {
    left: "3%",
    right: "15%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: [
    {
      name: "月",
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "kWh",
      axisLine: {
        // x轴线隐藏，但不隐藏背景线
        show: true,
      },
    },
  ],
  series: [
    {
      name: "冷却塔",
      type: "bar",
      stack: "Ad",
      emphasis: {
        focus: "series",
      },
      data: [],
      color: "#90cd50",
    },
    {
      name: "冷冻泵",
      type: "bar",
      stack: "Ad",
      emphasis: {
        focus: "series",
      },
      data: [],
      color: "#FFC40F",
    },
    {
      name: "冷却泵",
      type: "bar",
      stack: "Ad",
      emphasis: {
        focus: "series",
      },
      data: [],
      color: "#EAF2FA",
    },
    {
      name: "制冷机",
      type: "bar",
      stack: "Ad",
      emphasis: {
        focus: "series",
      },
      data: [],
      color: "#0070c0",
    },
  ],
});
const tableData = ref([
  {
    one: 105,
    ones: 0,
    two: "",
    three: "",
    four: "",
  },
]);
const state = reactive({
  //冷战
  cold_war: {
    indicatorName: "冷站效率分项",
    firstType: "冷站能效",
    secondType: "",
    thirdType: "",
    projectId: 1,
    dataType: "day",
    dayFrom: dayjs().subtract(7, "D").format("YYYY-MM-DD"),
    dayTo: dayjs().format("YYYY-MM-DD"),
  },
  //设备用能占比
  proportion: {
    indicatorName: "设备用能占比",
    firstType: "冷站能效",
    secondType: "",
    thirdType: "",
    projectId: 1,
    dataType: "day",
    dayFrom: dayjs().subtract(7, "D").format("YYYY-MM-DD"),
    dayTo: dayjs().format("YYYY-MM-DD"),
  },
  //用能成本分析
  analyse: {
    indicatorName: "用能成本分析",
    firstType: "冷站能效",
    secondType: "",
    thirdType: "",
    projectId: 1,
    dataType: "day",
    dayFrom: dayjs().subtract(7, "D").format("YYYY-MM-DD"),
    dayTo: dayjs().format("YYYY-MM-DD"),
  },
  //热平衡
  heat_balance: {
    indicatorName: "热平衡",
    firstType: "冷站能效",
    secondType: "",
    thirdType: "",
    projectId: 1,
    dataType: "day",
    dayFrom: dayjs().subtract(7, "D").format("YYYY-MM-DD"),
    dayTo: dayjs().format("YYYY-MM-DD"),
  },
  //峰平谷用能分析
  energy: {
    indicatorName: "峰平谷用能分析",
    firstType: "冷站能效",
    secondType: "",
    thirdType: "",
    projectId: 1,
    dataType: "hour",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
  },
});
//冷战
const getcold_war = async () => {
  let { data: res } = await ProjectGroupone(state.cold_war);
  console.log(res, "冷站能效冷站");
  const z = [];
  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      z.push(`${item.day.substring(5, 7)}/${item.day.substring(8, 10)}`);
      if (item.type == "type1") {
        option1.series[0].data.push(item.number1);
      } else if (item.type == "type2") {
        option1.series[1].data.push(item.number1);
      } else if (item.type == "type3") {
        option1.series[2].data.push(item.number1);
      } else if (item.type == "type4") {
        option1.series[3].data.push(item.number1);
      }
    });
  }
  z.forEach((item2, index2) => {
    z.forEach((item1, index1) => {
      if (z[index2] == z[index1]) {
        z.splice(index1, 1);
      }
    });
  });
  option1.xAxis.data = z;
};
//冷站时间
const timee = () => {
  console.log(time.value._rawValue);
  state.cold_war.dayFrom = time.value._rawValue[0];
  state.cold_war.dayTo = time.value._rawValue[1];
  getcold_war();
};
//设备用能占比
const getproportion = async (key = "kWh") => {
  let { data: res2 } = await ProjectGroupone(state.proportion);
  let { data: res } = await ProjectGroupone(state.cold_war);
  console.log(res2);
  console.log(res, "数据评价");
  var xlist = [];
  res.data.commonDailyDataList.forEach((item) => {
    item.day = `${item.day.substring(0, 4)}`;
    if (!xlist.includes(item.day)) {
      xlist.push(item.day);
    }
  });
  const datalist = [];
  for (let i = 0; i < xlist.length; i++) {
    const s = res.data.commonDailyDataList.filter((item) => {
      return item.day == xlist[i];
    });
    datalist.push(s);
  }
  console.log(datalist, "datalist");
  const vl = ["type1", "type2", "type3", "type4", "type5"];
  const datall = [];
  for (let x = 0; x < vl.length; x++) {
    for (let z = 0; z < datalist.length; z++) {
      let s = datalist[z].filter((item) => {
        return item.type == vl[x];
      });
      datall.push(s);
    }
  }
  console.log(datall, "datall");
  const datashuju = [];
  const zhi = ["制冷机", "冷却泵", "冷冻泵", "冷却塔", "热水泵"];
  for (var s = 0; s < datall.length; s++) {
    var v = 0;
    for (var l = 0; l < datall[s].length; l++) {
      v += datall[s][l].number1;
    }
    datashuju.push([zhi[s], v]);
  }
  xlist.unshift("product");

  datashuju.unshift(xlist);
  let datashujuju = datashuju.filter((item) => item[0]);

  if (key !== "kWh") {
    let num = 0;
    datashujuju.slice(1).forEach((item) => {
      num += item[1];
    });
    datashujuju = datashujuju.map((item) => {
      if (typeof item[1] === "number") {
        item[1] = ((item[1] / num) * 100).toFixed(2);
      }
      return item;
    });
  }
  console.log(datashujuju, "datashuju");
  option2.dataset.source = datashuju;
  option2.yAxis.name = key;
};
//用能成本分析
const getanalyse = async () => {
  let { data: res } = await ProjectGroupone(state.analyse);
  console.log(res, "用能成本分析");
  const z = [];
  var xlist = [];
  res.data.commonDailyDataList.forEach((item) => {
    if (!z.includes(item.day)) {
      z.push(item.day);
    }
    item.day = `${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`;
    if (!xlist.includes(item.day)) {
      xlist.push(item.day);
    }
  });
  option4.xAxis.data = xlist;
  const datalist = [];
  for (var i = 0; i < xlist.length; i++) {
    const s = res.data.commonDailyDataList.filter((item) => {
      return item.day == xlist[i];
    });
    datalist.push(s);
  }

  const datashuju = [];

  for (var s = 0; s < datalist.length; s++) {
    var v = 0;
    for (var l = 0; l < datalist[s].length; l++) {
      v += datalist[s][l].number1;
    }
    datashuju.push(v);
  }
  option4.series[0].data = datashuju;
};
// 获取冷站信息
const getlz = async () => {
  let { data } = await getlzmsg();
  lzmsg.data = data;
  console.log(data);
};
//用能成本分析时间
const timee3 = () => {
  console.log(time3.value._rawValue);
  state.analyse.dayFrom = time3.value._rawValue[0];
  state.analyse.dayTo = time3.value._rawValue[1];
  console.log(state.analyse);
  getanalyse();
};

//热平衡
const getheat_balance = async () => {
  let { data: res } = await ProjectGroupone(state.heat_balance);
  console.log("热平衡", res);
  var xlist = [];
  res.data.commonDailyDataList.forEach((item) => {
    item.day = `${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`;
    if (!xlist.includes(item.day)) {
      xlist.push(item.day);
    }
  });
  option3.xAxis.data = xlist;
  const datalist = [];
  for (var i = 0; i < xlist.length; i++) {
    const s = res.data.commonDailyDataList.filter((item) => {
      return item.day == xlist[i];
    });
    datalist.push(s);
  }
  const datashuju = [];

  for (var s = 0; s < datalist.length; s++) {
    var v = 0;
    for (var l = 0; l < datalist[s].length; l++) {
      v += datalist[s][l].number1;
    }
    datashuju.push(v);
  }
  option3.series[0].data = datashuju;
};
//热平衡时间
const timee4 = () => {
  console.log(time1.value._rawValue);
  state.heat_balance.dayFrom = time1.value._rawValue[0];
  state.heat_balance.dayTo = time1.value._rawValue[1];
  console.log(time1.value._rawValue);
  getheat_balance();
};
//用能分析
const getenergy = async () => {
  let { data: res } = await Analysis(state.energy);
  console.log("用能分析", res);
  if (res.code == 200) {
    console.log(res.data.commonHourlyDataList);
    var xlist = [];
    res.data.commonHourlyDataList.forEach((item) => {
      item.day = `${item.day.substring(6, 7)}`;
      if (!xlist.includes(item.day)) {
        xlist.push(item.day);
      }
    });
    option5.xAxis[0].data = xlist;
    const datalist = [];
    for (var i = 0; i < xlist.length; i++) {
      const s = res.data.commonHourlyDataList.filter((item) => {
        return item.day == xlist[i];
      });
      datalist.push(s);
    }
    const vl = ["type1", "type2", "type3", "type4"];
    const datall = [];
    for (var x = 0; x < vl.length; x++) {
      for (var z = 0; z < datalist.length; z++) {
        const s = datalist[z].filter((item) => {
          return item.type == vl[x];
        });
        datall.push(s);
      }
    }
    const datashuju = [];
    for (var s = 0; s < datall.length; s++) {
      var v = 0;
      for (var l = 0; l < datall[s].length; l++) {
        v += datall[s][l].number1;
      }
      datashuju.push(v);
    }
    option5.series[0].data.push(datashuju[0]);
    option5.series[1].data.push(datashuju[1]);
    option5.series[2].data.push(datashuju[2]);
    option5.series[3].data.push(datashuju[3]);
  }
};
//用能分析时间
const timee1 = () => {
  console.log(time4.value._rawValue);
  state.energy.dayFrom = time4.value._rawValue[0];
  state.energy.dayTo = time4.value._rawValue[1];
  console.log(time4.value._rawValue);
  getenergy();
};

// 获取单位
const getUserinputDw = async () => {
  let { data: userInputdata } = await AdminInputs();
  let userInput = userInputdata.data.list[0];
  // kgce单位交互输入
  dwzh.kgce = JSON.parse(userInput.unit).electric_tce;
  // kgco单位交互输入
  dwzh.kgco = JSON.parse(userInput.unit).electric_kgco;
};
onMounted(() => {
  getcold_war();
  getproportion();
  getanalyse();
  getheat_balance();
  getenergy();
  getlz();
  getUserinputDw();
  getLengZhanNumMsg();
  getLengZhanTableMsg();
  getLengZonglengMsg();
});
</script>

<style scoped lang="scss">
:deep(.el-card__body) {
  padding: 0;
}

.el-one {
  display: flex;

  .card-one {
    flex: 1;
    margin-right: 0px;

    .title {
      padding: 20px;
      font-size: 20px;
      color: #6d83b7;
      font-weight: 600;
      border-bottom: 2px solid #f3f5f9;
      height: 73px;
    }

    .nh_css {
      margin: 15px 20px 0;
      font-size: 17px;
      color: #aaacab;
      padding-bottom: 20px;
      border-bottom: 2px dashed #f0f2f7;

      p {
        margin: 10px 0;
        font-size: 17px;
        color: #90979e;

        .pFont {
          font-size: 20px;
          color: #7695d1;
          margin: 0 5px 0 10px;
        }

        .ps {
          font-size: 10px;
        }
      }

      .ms {
        display: flex;
        justify-content: space-between;
      }
    }

    .ech-one {
      position: relative;
      margin: 0 20px 0;
      border-bottom: 2px dashed #f0f2f7;

      .rq {
        position: absolute;
        top: 27px;
        right: 1px;
      }
    }

    .ech-two {
      position: relative;
      padding: 10px 0;
      .rq {
        position: absolute;
        top: 25px;
        right: 10px;
      }
    }
  }

  .card-two {
    flex: 1;
    margin-left: 8px;

    .title {
      padding: 20px;
      font-size: 20px;
      color: #6d83b7;
      font-weight: 600;
      border-bottom: 2px solid #f3f5f9;
    }

    .centt {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px solid #f3f5f9;

      .titles {
        padding: 20px;
        font-size: 20px;
        color: #6d83b7;
        font-weight: 600;
        height: 73px;
      }
    }

    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 20px;

      p {
        margin: 10px 0;
        font-size: 17px;
        color: #90979e;

        .pFont {
          font-size: 20px;
          color: #7695d1;
          margin: 0 5px 0 20px;
        }

        .ps {
          font-size: 10px;
        }
      }
    }

    .qwe {
      position: relative;
      margin: 15px 20px;

      .reph {
        position: absolute;
        bottom: 16%;
        left: 0;
        font-size: 15px;
        color: #8a8c8a;

        .pFont {
          font-size: 20px;
          color: #7695d1;
        }

        .ps {
          font-size: 10px;
        }
      }
    }

    .shebei {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      font-size: 20px;
      color: #6d83b7;
      font-weight: 600;
      border-bottom: 2px solid #f3f5f9;
    }

    .tabl {
      margin: 10px 20px;
    }
  }
}

.el-two {
  display: flex;
  margin-top: 8px;

  .card-one {
    flex: 1;
    margin-right: 4px;
    :deep(.el-card) {
      height: 100%;
    }
    .title {
      padding: 20px;
      font-size: 20px;
      color: #6d83b7;
      font-weight: 600;
      border-bottom: 2px solid #f3f5f9;
    }

    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;

      div {
        margin: 10px 0;
        font-size: 15px;
        color: #90979e;

        .pFont {
          font-size: 20px;
          color: #7695d1;
          margin-left: 10px;
        }

        .ps {
          font-size: 10px;
        }
      }
    }

    .head_ss {
      display: flex;
      justify-content: right;
      align-items: center;
      margin-bottom: 10px;
    }
  }

  .card-two {
    flex: 1;
    margin-left: 4px;

    .title {
      padding: 20px;
      font-size: 20px;
      color: #6d83b7;
      font-weight: 600;
      border-bottom: 2px solid #f3f5f9;
    }

    .hea-one {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #8f9898;
      margin: 15px 0 10px 14px;

      ul {
        list-style: none;

        li {
          margin: 10px 0;

          .mm {
            font-size: 20px;
            color: #548cd0;
            margin-left: 10px;
          }

          .nn {
            font-size: 15px;
            margin-left: 5px;
            color: #548cd0;
          }
        }
      }

      .con {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .con {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0 10px 23px;

      .con-one {
        color: #8f9898;
        font-size: 17px;
        font-weight: 600;
      }
    }
  }
}

.con-two {
  display: flex;
  justify-content: center;
}
</style>
